import { useNavigate } from 'react-router-dom';
import Nabar from '../../conpoment/Nabar';
import styles from './index.module.css';

function Index() {
  const navigate = useNavigate();

  const handleAgree = () => {
    // 用户同意须知后的处理逻辑
    console.log('用户已阅读并同意医技预约须知');
    
    // 跳转到医院选择页面，并传递医技预约标识
    navigate('/appointment_from', { 
      state: { from: 'medical-tech-appointment' } 
    });
  };

  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <Nabar title="医技预约须知" sticky={false} />
      
      {/* 内容区域 */}
      <div className={styles.content}>
        <div className={styles.instructions}>
          <div className={styles.introText}>
            需要摘除口罩进行医技检查的患者及陪护人员（如口腔治疗、支气管镜、上消化道内镜等），需提供48小时内核酸报告。
          </div>

          <div className={styles.rulesList}>
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>1、</span>
              <span className={styles.ruleText}>预约前，必须先缴费。</span>
            </div>
            
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>2、</span>
              <span className={styles.ruleText}>预约时，请仔细核对您的预约信息和检查时间。</span>
            </div>
            
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>3、</span>
              <span className={styles.ruleText}>预约成功后，您可以随时通过预约平台查询您的预约信息。</span>
            </div>
            
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>4、</span>
              <span className={styles.ruleText}>请认真阅读《检查预约须知》内容，按预约时间及时段到院接受检查，以缩短您的检查等候时间。</span>
            </div>
            
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>5、</span>
              <span className={styles.ruleText}>如您因故不能按时接受检查时，请提前1天到院办理"取消预约"。</span>
            </div>
            
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>6、</span>
              <span className={styles.ruleText}>放射X线、CT检查、核磁共振检查退费审核请至检查中心办理。</span>
            </div>
            
            <div className={styles.ruleItem}>
              <span className={styles.ruleNumber}>7、</span>
              <span className={styles.ruleText}>检查时间过期者，需重新预约。</span>
            </div>
          </div>

          <div className={styles.contactInfo}>
            预约中心咨询电话: 028-66666666666
          </div>
        </div>
      </div>

      {/* 底部确认按钮 */}
      <div className={styles.bottomButton}>
        <button className={styles.agreeButton} onClick={handleAgree}>
          我已阅读并同意须知
        </button>
      </div>
    </div>
  );
}

export default Index;
